
<template>
  <div id="app">
   <!-- 
     el-row 行
     el-col 列 默认情况将界面分成24列 ：span = 8

    -->
    <el-row class ="box">
      <el-col :span = "8">
        <div class="blue"></div>
      </el-col>
      <el-col :span = "8">
        <div class="green"></div>
      </el-col>
      <el-col :span = "8">
        <div class="red"></div>
      </el-col>
    </el-row>


    <!-- 有间隔的布局 -->
    <el-row class ="box" :gutter="20">
      <el-col :span = "6">
        <div class="blue"></div>
      </el-col>
      <el-col :span = "6">
        <div class="green"></div>
      </el-col>
      <el-col :span = "6">
        <div class="red"></div>
      </el-col>
      <el-col :span = "6">
        <div class="blue"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
 *{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }
</style>
<style lang="less" scoped>
.box{
  margin: 40px;
  width:100vw;
  height: 100vh;
}
.blue{
  height: 20px;
  width: 100%;
  background: lightblue;
}
.red{
  height: 100vh;
  width: 100%;
  background: hotpink;
}
.green{
  height: 20px;
  width: 100%;
  background: greenyellow;
}
 
</style>


